import { Button, Modal } from 'antd';
import { useState } from 'react';
import styles from './index.module.less';
import { useFingerInput } from '@/hooks/useFingerInput';
import { Image } from 'antd';
const FingerInput = (props) => {
    const { onFinish, btnText = '录入患者指纹' } = props;
    const { fingerState, fingerUrl, onRegister, clearFinger, onDisregister } = useFingerInput()

    const [previewOpen, setPreviewOpen] = useState(false);


    const handleFinishSign = () => {
        onDisregister()
        onFinish(fingerUrl)
        clearFinger();
        setPreviewOpen(false);
    };

    const handleCancel = () => setPreviewOpen(false);

    const handleInput = () => {
        setPreviewOpen(true);
    }

    return (
        <>
            <Button type='primary' className={styles.fingerBtn} onClick={handleInput}>{btnText}</Button>
            <Modal open={previewOpen} footer={null} onCancel={handleCancel} width={800}>
                <div className={styles.signContainer}>
                    <div className={styles.signContent}>
                        <div>设备状态：{fingerState}</div>
                        {fingerUrl ? <Image src={fingerUrl} alt="" className={styles.fingerImg} placeholder /> : <div className={styles.fingerImg}></div>}
                    </div>
                    <div className={styles.buttonContainer}>
                        <Button onClick={onRegister} className={styles.clearBtn}>
                            开始采集
                        </Button>
                        <Button onClick={clearFinger} className={styles.clearBtn}>
                            清除
                        </Button>
                        <Button onClick={handleFinishSign} className={styles.signBtn} type="primary">
                            确认
                        </Button>
                    </div>
                </div>
            </Modal>

        </>

    );
};

export default FingerInput;
